<div id="network-supply-costing-bar12" style="height: 100%">

</div>

<script type="text/javascript">
    function loadbar12(d1) {
        var dom = document.getElementById("network-supply-costing-bar12");
        var myChart = echarts.init(dom,'macarons');
        var option = drillDown12.getOption(d1);

        drillDown12.initChart(myChart,option,dom,d1);

        $('#return-button12').on('click',function(){
            var myChart = echarts.init(dom);
            var option = drillDown12.getOption(d1);
            drillDown12.initChart(myChart,option,dom,d1);
        });

    }
    var drillDown12 = {
        getOption : function (d1) {

            var option = null;
            option = {
                title: {
                    text: '',
                    show: false
                },
                tooltip: {
                    trigger: 'axis'
                },
                toolbox: {

                },
                legend: {

                },
                calculable: true,
                xAxis: {
                    type: 'category',
                    axisLabel:{
                        show:true,
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                },
                grid: {
                    left: '3%',
                    right: '8%',
                    bottom: '5%',
                    top:'5%',
                    containLabel: true
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        formatter: function(value){
                            var var1=value*1;
                            return var1;
                        },
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    splitLine:{
                        show:true
                    },
                    splitArea: {
                        show: true,
                        areaStyle: {
                            color: ['rgba(0,0,0,0)', 'rgba(0,0,0,0)']
                        }
                    },
                },
                series: [
                    {
                        name: '数量',
                        type: 'line',
                    }
                ]
            };
            return option;
        },
        initChart : function (myChart,option,dom,d1) {
            option.xAxis.data = d1.data.arr23;
            option.series[0].data = d1.data.arr24;
            myChart.setOption(option);

            myChart.on('click',function(object){

                // 销毁之前的echarts实例
                echarts.dispose(dom);
                // 初始化一个新的实例
                var myChart = echarts.init(dom,'macarons');
                //object为当前的这个echart对象，大家可以自己打印出来看看
                console.dir(object);
                // 我们可以看到name属性即为当前点击点的对应月份值，那么我们可以通过这个值去接口查询对应201609月份下的每一天的值.
                // 此处的201609月份数据可以通过接口读取
                $.ajax({
                        url: "#springUrl('/network/supply/costing/getData121')",
                        data: {"center": object.name},
                        type: "POST",
                        //async: false,
                        success: function (text) {
                            var d = JSON.parse(text);
                            option.xAxis.data = d.data.arr1;
                            option.series[0].data = d.data.arr2;
                            myChart.setOption(option, true);
                        }
                    }
                );


            });
        },
    };
</script>